<!--
	THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script type="text/javascript">
 var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    var option;

var plot_name = '{{ graph_name }}'
var plot_data = '{{ data }}'.split(",");
var inv = parseInt(' {{ inv }} ');
var x_data = []
console.log(inv)
for(let i = 0;i<plot_data.length;i++){ 
  x_data.push(inv*i);   
  }
console.log(x_data)
option = {
  // Make gradient line here
  visualMap:
    {
      show: false,
      type: 'continuous',
      seriesIndex: 0,
      min: 0,
      max: plot_data.length -1
    },
  title:
    {
      left: 'center',
      text: plot_name
    },
  tooltip: {
    trigger: 'axis'
  },
  toolbox: {
    show: true,
    feature: {
      saveAsImage: {}
    }
    },
  xAxis: 
    {
      name: "Time",
      data : x_data,
      axisLabel: {
      formatter: '{value} ms',
      align: 'center'
      // ...
    }
    },
  yAxis: {
      name: 'throughtput/B'
    },
  series:
    {
      type: 'line',
      showSymbol: false,
      data: plot_data
    }
};
    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>